<template>
    <div>
        <van-tabs v-model:active="active">
            <van-tab title="正在热映">
                <ul>
                    <li v-for="(item, index) in lists" :key="index" @click="goDetail(item.id)">
                        <van-card :thumb="item.poster">
                            <template #title>
                                <div class="title-line">
                                    <span class="name">{{ item.name }}</span>
                                    <van-tag plain type="primary" class="type-tag">
                                        {{ item.filmType }}
                                    </van-tag>
                                </div>
                            </template>

                            <template #desc>
                                <div class="text">
                                    <div>观众评分: <span>{{ item.grade }}</span></div>
                                    <div>主演：&emsp;{{ formatActors(item.actors) }}</div>
                                    <div>{{ item.nation }}&emsp;|&emsp;{{ item.runtime }}分钟</div>
                                </div>
                            </template>
                            <template #footer>
                                <van-button size="mini">按钮</van-button>
                            </template>
                        </van-card>
                    </li>
                </ul>
            </van-tab>
            <van-tab title="即将上映">
                <ul>
                    <li v-for="(item, index) in listcom" :key="index" @click="$router.push(`/film/${item.id}`)">
                        <van-card :thumb="item.poster">
                            <template #title>
                                <div class="title-line">
                                    <span class="name">{{ item.name }}</span>
                                    <van-tag plain type="primary" class="type-tag">
                                        {{ item.filmType }}
                                    </van-tag>
                                </div>
                            </template>

                            <template #desc>
                                <div class="text">
                                    <div>观众评分: <span>{{ item.grade }}</span></div>
                                    <div class="one-line">主演：&emsp;{{ formatActors(item.actors) }}</div>
                                    <div>{{ item.nation }}&emsp;|&emsp;{{ item.runtime }}分钟</div>
                                    <div class="one-line">{{ item.address }}</div>
                                </div>
                            </template>
                            <template #footer>
                                <van-button size="mini">按钮</van-button>
                            </template>
                        </van-card>
                    </li>
                </ul>
            </van-tab>
        </van-tabs>

    </div>
</template>

<script>
import { getList } from '@/apis/shouye';
export default {
    data() {
        return {
            active: 0,
            lists: [],
            listcom: []
        }
    },
    created() {
        getList({ type: 1 }).then(res => {
            console.log('热映', res.data.data.list)
            this.lists = res.data.data.list
        })
        getList({ type: 2 }).then(res => {
            console.log('即将', res.data.data.list)
            this.listcom = res.data.data.list
        })
    },
    methods: {
        // 把 JSON 字符串转成 "导演·演员·演员" 形式
        formatActors(actorsStr) {
            if (!actorsStr) return '';
            try {
                const arr = JSON.parse(actorsStr);
                return arr.map(a => a.name).join(' · ');
            } catch {
                return '';
            }
        },
        goDetail(id) {
            // 使用 path 带上 id，匹配 /film/:id 路由
            this.$router.push(`/film/${id}`)
        }
    }
}
</script>

<style lang="less" scoped>
.text {
    margin: 5px;
    color: gray;

    span {
        color: orange;
    }
}

.title-line {
    display: flex;
    align-items: center;
    gap: 8px;
    /* 标题与标签间距 */
}

.type-tag {
    flex-shrink: 0;
}

:deep(.van-button) {
    background-color: white;
    border-color: orange;
    color: orange;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    right: 25px;
}

.one-line {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 200px;
}

.name {
    font-size: 16px;
    /* 想再大就改成 18px */
    font-weight: bold;
}
</style>